<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <h3 class="panel-title">质检统计分析</h3>
    </div>
    <div class="panel-body">
        <!-- 时间筛选 -->
        <div class="row">
            <div class="col-md-12">
                <div class="form-inline mb-3">
                    <div class="form-group">
                        <label>时间范围：</label>
                        <input type="text" id="start-date" class="form-control datetimepicker" placeholder="开始日期" value="{:date('Y-m-01')}" />
                    </div>
                    <div class="form-group">
                        <label>至</label>
                        <input type="text" id="end-date" class="form-control datetimepicker" placeholder="结束日期" value="{:date('Y-m-d')}" />
                    </div>
                    <button type="button" class="btn btn-primary" id="btn-search">
                        <i class="fa fa-search"></i> 查询
                    </button>
                    <button type="button" class="btn btn-success" id="btn-export">
                        <i class="fa fa-download"></i> 导出报表
                    </button>
                </div>
            </div>
        </div>

        <!-- 总体统计卡片 -->
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-3">
                                <i class="fa fa-check-square-o fa-3x"></i>
                            </div>
                            <div class="col-xs-9 text-right">
                                <div class="huge" id="stat-total">0</div>
                                <div>总质检数</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-3">
                                <i class="fa fa-thumbs-up fa-3x"></i>
                            </div>
                            <div class="col-xs-9 text-right">
                                <div class="huge" id="stat-qualified">0</div>
                                <div>合格数</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="panel panel-danger">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-3">
                                <i class="fa fa-thumbs-down fa-3x"></i>
                            </div>
                            <div class="col-xs-9 text-right">
                                <div class="huge" id="stat-unqualified">0</div>
                                <div>不合格数</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="panel panel-info">
                    <div class="panel-heading">
                        <div class="row">
                            <div class="col-xs-3">
                                <i class="fa fa-pie-chart fa-3x"></i>
                            </div>
                            <div class="col-xs-9 text-right">
                                <div class="huge" id="stat-rate">0%</div>
                                <div>合格率</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 图表展示 -->
        <div class="row">
            <!-- 质检趋势图 -->
            <div class="col-lg-8">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <i class="fa fa-line-chart"></i> 质检趋势分析
                        </h4>
                    </div>
                    <div class="panel-body">
                        <div id="trend-chart" style="height: 400px;"></div>
                    </div>
                </div>
            </div>

            <!-- 质检结果分布饼图 -->
            <div class="col-lg-4">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <i class="fa fa-pie-chart"></i> 质检结果分布
                        </h4>
                    </div>
                    <div class="panel-body">
                        <div id="result-pie-chart" style="height: 400px;"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 工序质检统计 -->
            <div class="col-lg-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <i class="fa fa-bar-chart"></i> 工序质检统计（TOP10）
                        </h4>
                    </div>
                    <div class="panel-body">
                        <div id="process-chart" style="height: 400px;"></div>
                    </div>
                </div>
            </div>

            <!-- 不合格项TOP10 -->
            <div class="col-lg-6">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <i class="fa fa-exclamation-triangle"></i> 不合格项TOP10
                        </h4>
                    </div>
                    <div class="panel-body">
                        <div id="defect-chart" style="height: 400px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.huge {
    font-size: 32px;
    font-weight: bold;
}
.mb-3 {
    margin-bottom: 20px;
}
</style>
